<template>
	<div class="app-container">
		<!-- <i class="el-icon-question  xsydBtn" @click.stop="driverStart">操作引导</i> -->
		<el-form id="queryForm" :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="95px">
			<el-form-item label="节点名称" prop="searchKey">
				<el-input v-model="queryParams.searchKey" maxlength="50" placeholder="请输入节点名称或节点IP" clearable size="small"
				 @keyup.enter.native="handleQuery" />
			</el-form-item>
			<el-form-item label="节点类型" prop="nodeType">
				<el-select v-model="queryParams.nodeType" placeholder="请选择节点类型" clearable size="small" style="width: 240px">
					<el-option v-for="dict in nodeTypeOptions" :key="dict.value" :label="dict.dictLabel" :value="dict.dictValue" />
				</el-select>
			</el-form-item>
			<el-form-item label="节点状态" prop="nodeType">
				<el-select v-model="queryParams.nodeStatus" placeholder="请选择节点状态" clearable size="small">
					<el-option v-for="dict in nodeStatusOptions" :key="dict.value" :label="dict.dictLabel" :value="dict.dictValue" />
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
				<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
			</el-form-item>
		</el-form>

		<el-row :gutter="10" class="mb8">
			<el-col :span="1.5" id="addBox">
				<el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['console:belfNode:add']">新增</el-button>
			</el-col>
			<el-col :span="1.5">
				
				 <el-button
            size="mini"
            type="danger"
            icon="el-icon-delete"
            :disabled="multiple"
            @click="handleDelete"
            v-hasPermi="['console:belfNode:remove']"
          >删除</el-button>
			</el-col>
			<!-- 	<el-col :span="1.5">
				<el-button type="primary" icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['console:belfNode:export']"
				 plain>导出</el-button>
			</el-col> -->
			<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
		</el-row>

		<el-table  :border="$store.state.settings.isShowTabBorder" ref="tableBox"  id="tableBox" :data="belfNodeList" @selection-change="handleSelectionChange">
			<el-table-column type="selection" width="55" align="center" />
			<el-table-column label="节点名称" align="left" prop="nodeName" />
			<el-table-column label="节点类型" width="100" align="center" prop="nodeType" :formatter="nodeTypeFormat" />
			<el-table-column label="节点IP地址" width="128" align="center" prop="nodeIp" />
			<el-table-column label="管理端口" width="80" align="center" prop="haPort" />
			<el-table-column label="节点状态" width="100" align="center" prop="nodeStatus">
				<template slot-scope="scope">
					<span v-if="scope.row.nodeStatus == 1" style="color: #67C23A;">
						<i class="el-icon-loading"></i>
						在线</span>
					<span v-else style="color: #F56C6C;">
						<i class="el-icon-error"></i>
						离线</span>
				</template>
			</el-table-column>
			<!--      <el-table-column label="代理状态" align="center" prop="agentStatus"  :formatter="agentStatusFormat" />
      <el-table-column label="业务应用状态" align="center" prop="serviceStatus"  :formatter="serviceStatusFormat" /> -->

			<el-table-column label="操作系统" align="center" prop="nodeSystem" :formatter="nodeSystemFormat" />
			<el-table-column label="控制台地址" width="128" align="center" prop="consoleAddress" />
			<el-table-column label="宿主类型" align="center" prop="vmType" :formatter="hostTypeFormat" />

			<el-table-column label="节点描述" align="center" prop="nodeDesc" width="200">
				<template slot-scope="scope">
					<el-tooltip placement="top" v-if="scope.row.nodeDesc && scope.row.nodeDesc.length > 14">
						<div slot="content">{{scope.row.nodeDesc}}</div>
						<div class="nowrap">{{scope.row.nodeDesc }}</div>
					</el-tooltip>
					<div class="nowrap" v-else>{{scope.row.nodeDesc || '--'}}</div>
				</template>
			</el-table-column>
			<el-table-column label="操作" align="right" class-name="small-padding fixed-width" width="250">
				<template slot-scope="scope">
					<el-button size="mini" type="text" icon="el-icon-view" v-show="scope.row.nodeType != 3" @click="showHandle(scope.row)">节点监控</el-button>
					<el-button size="mini" type="text" icon="el-icon-link" @click="handleUpdateFn(scope.row,'resh')">连通测试</el-button>
					<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['console:belfNode:edit']">修改</el-button>
					<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['console:belfNode:remove']">删除</el-button>
				</template>
			</el-table-column>


		</el-table>

		<pagination v-show="total>0" :total="total" :page.sync="queryParams.pgNum" :limit.sync="queryParams.pgSize"
		 @pagination="getList" />

		<!-- 添加或修改节点信息对话框 -->
		<el-dialog :title="title" :visible.sync="open" width="800px" append-to-body :close-on-click-modal="false">

			<!-- 帮助引导 -->
			<guidance class="dialogBtn" title="" :list="helpList2"></guidance>

			<el-form ref="form" :model="form" :rules="rules" label-width="110px" style="margin-top:-20px">
				<el-row>
					<el-col :span="12">
						<el-form-item label="节点名称" prop="nodeName">
							<el-input v-model="form.nodeName" maxlength="50" size="small" show-word-limit placeholder="请输入节点名称" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="节点IP地址" prop="nodeIp">
							<el-input @input="handlerPageNo($event)" v-model="form.nodeIp" size="small" :disabled="title == '添加节点信息' || form.upFlag ?false:true"
							 placeholder="请输入节点ip地址" />
						</el-form-item>
					</el-col>

					<el-col :span="12">
						<el-form-item label="节点类型" prop="nodeType">
							<el-select v-model="form.nodeType" placeholder="请选择节点类型" @change="changeNodeTypeFn" :disabled="title == '添加节点信息' || form.upFlag ?false:true"
							 clearable size="small" style="width:270px">
								<el-option v-for="dict in nodeTypeOptions" :key="dict.value" :label="dict.dictLabel" :value="dict.dictValue" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="管理端口" prop="haPort">
							<el-input v-model="form.haPort" size="small" show-word-limit placeholder="端口" />
						</el-form-item>
					</el-col>

					<!-- <el-col :span="3">
						<span class='hsPortSpan' @click='testHttpCode' v-loading.fullscreen.lock="fullscreenLoading" element-loading-text="拼命加载中"
						 element-loading-spinner="el-icon-loading" customClass='elLodingBox' element-loading-background="rgba(0, 0, 0, 0.8)">连通测试</span>
					</el-col> -->

					<el-col :span="12">
						<el-form-item label="宿主类型" prop="vmType">
							<el-select v-model="form.vmType" placeholder="请选择宿主类型" clearable size="small" style="width:270px">
								<el-option v-for="dict in hostTypeOptions" :key="dict.value" :label="dict.dictLabel" :value="dict.dictValue" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="实例ID" prop="vmId">
							<el-input v-model="form.vmId" :disabled="form.vmType != 'Bingo'" size="small" placeholder="输入品高实例ID" maxlength="10" />
						</el-form-item>
					</el-col>


					<!-- <el-col :span="12">
						<el-form-item label="节点状态">
							<el-select v-model="form.nodeStatus" disabled placeholder="请选择节点状态" clearable size="small">
								<el-option v-for="dict in nodeStatusOptions" :key="dict.value" :label="dict.dictLabel" :value="dict.dictValue" />
							</el-select>
						</el-form-item>
					</el-col> -->

					<el-col :span="12">
						<el-form-item label="网关" prop="nodeGateway">
							<el-input v-model="form.nodeGateway" maxlength="15" size="small" placeholder="请输入网关" />
						</el-form-item>
					</el-col>
					<!-- 			<el-col :span="12">
						<el-form-item label="宿主类型" prop="nodeType">
							<el-select v-model="form.nodeType" placeholder="请选择宿主类型" :disabled="form.isShowSl" clearable size="small" style="width:270px">
							 <el-option v-for="dict in nodeTypeOptions" :key="dict.value" :label="dict.dictLabel" :value="dict.dictValue" />
								<el-option  label="实体机"  />
								<el-option  label="品⾼"  />
								<el-option  label="ESXi"  />
								<el-option  label="SmartX"  />
							</el-select>
						</el-form-item>
					</el-col>
					 -->
					<el-col :span="12">
						<el-form-item label="心跳间隔" prop="checkInterval">
							<el-select v-model="form.checkInterval" placeholder="请选择心跳间隔" clearable size="small" style="width:270px">
								<el-option v-for="dict in checkIntervalOptions" :key="dict.value" :label="dict.dictLabel" :value="dict.dictValue" />
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>

				<el-row>
					<el-col :span="12">
						<el-form-item label="操作系统" prop="nodeSystem">
							<el-select style="width:270px" @change="nodeSysChange" v-model="form.nodeSystem" :disabled="title == '添加节点信息'  || form.upFlag?false:true"
							 placeholder="请选择操作系统" clearable size="small">
								<el-option v-for="dict in nodeSystem" :key="dict.value" :label="dict.dictLabel" :value="dict.dictValue" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="控制台地址" prop="consoleAddress">
							<el-input v-model="form.consoleAddress" size="small" placeholder="请输入与节点IP同网段的控制台地址" />
						</el-form-item>
					</el-col>
				</el-row>

				<el-row>

					<!-- 	<el-col :span="12">
						<el-form-item label="数据存留" prop="dataDate">
							<el-input-number v-model="form.dataDate" :min="1" :max="1000" label="请输入数据存留时间"></el-input-number> 天
						</el-form-item>
					</el-col> -->
				</el-row>

				<el-row>
					<el-col :span="12">
						<el-form-item label="RPC线程数" prop="rpcThreadNum">
							<el-input-number v-model="form.rpcThreadNum" controls-position="right"  :min="1" :max="6"  size="small" show-word-limit placeholder="请输入节点名称" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="RPC超时数" prop="rpcTime">
							<el-input-number v-model="form.rpcTime" controls-position="right"  :min="1000" :max="70000"  size="small" show-word-limit placeholder="请输入节点名称" />
							（毫秒）
						</el-form-item>
					</el-col>

					<el-col :span="24">
						<el-form-item label="节点描述" prop="nodeDesc">
							<el-input v-model="form.nodeDesc" type="textarea" :rows="3" maxlength="100" show-word-limit placeholder="请输入内容" />
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<div slot="footer" class="dialog-footer" style="padding-bottom: 20px; margin-top: 20px;">
				<el-button type="primary" @click="submitForm">确 定</el-button>
				<el-button @click="cancel">取 消</el-button>
			</div>
		</el-dialog>

		<!-- 删除弹框 -->
		<el-dialog
		  title="提示"
		  :visible.sync="delNodeDialogVisible"
		  width="640px" append-to-body :close-on-click-modal="false">
		  <div class="ft16">
		  	<i class="el-icon-warning warning"></i>
		  	删除节点的同时会同步删除相关联的 “复刻组”,“保障组”和“CDP组”等数据,请再次确认要删除的节点信息后，点击确认删除。
		  	<p>一旦删除无法恢复，请谨慎操作！</p>
		  </div>

		  <p class="ft16">您将要删除节点:</p>
		  <div class="h170">
			<div class="tagDiv" v-for="dict in delNodeList" :key="dict.id" >
				  <p>{{dict.nodeName}}</p>
				  <p class="nodeIp">{{dict.nodeIp}}</p>
			</div>
		  </div>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="delNodeDialogVisible = false">取 消</el-button>
		    <el-button type="primary" @click="handleDeleteFn">确 定</el-button>
		  </span>
		</el-dialog>

		<!-- 系统监听 -->
		<systemMonitoring ref="sysDialog" :sysDialogVisible="sysDialogVisible"></systemMonitoring>


	</div>
</template>

<script>
	import {
		listBelfNode,
		getBelfNode,
		delBelfNode,
		addBelfNode,
		updateBelfNode,
		exportBelfNode,
		httpCode,
		editNodeStatus,
		ipCheck,
		nodeCheck
	} from "@/api/console/belfNode";

	import systemMonitoring from '@/views/components/flowChart/systemMonitoring';

	import global_ from '@/utils/Global';

	import {
		mapGetters
	} from "vuex";
	export default {
		computed: {
			...mapGetters(["novice_guidance_status"]),
		},
		name: "BelfNode",
		components: {
			systemMonitoring
		},
		data() {
			var ipCheckExist = (rule, value, callback) => {
				ipCheck({
					'nodeIp': value
				}).then(response => {
					if (response.data) {
						if (this.title != "修改节点信息") {
							callback(new Error('已经存在该IP地址的节点'));
						} else {
							callback();
						}
					} else {
						callback();
					};
				});
			};

			var CheckVmId = (rule, value, callback) => {
				if (this.form.vmType) {
					if (this.form.vmType == 'Bingo') {
						if (value == '' || value == null) {
							callback(new Error('请填写品高实例ID'));
						} else if (value.length != 10) {
							callback(new Error('请检查品高ID是否完整'));
						} else {
							callback();
						}
					} else {
						callback();
					}
				} else {
					callback();
				}
			};
			return {
				helpList2:[
					{
						'title':'节点配置注意事项',
						'helpMsg':'节点配置注意事项',
					},

				],
				helpList:[
					{
						'title':'1.节点信息页面指引',
						'helpMsg':'节点信息页面指引',
					},
					{
						'title':'2.节点配置注意事项',
						'helpMsg':'节点配置注意事项',
					},
				],
				// 操作系统
				nodeSystem: [],
				// 遮罩层
				loading: true,
				// 选中数组
				ids: [],
				// 非多个禁用
				multiple: true,
				// 显示搜索条件
				showSearch: true,
				// 总条数
				total: 0,
				// 节点信息表格数据
				belfNodeList: [],
				// 弹出层标题
				title: "",
				// 是否显示弹出层
				open: false,
				// 查询参数
				queryParams: {
					pgNum: 1,
					pgSize: 10,
					searchKey: null,
					nodeType: null,
					nodeStatus: ''
				},
				fullscreenLoading: false,
				delNodeDialogVisible: false,
				// 表单参数
				form: {
					haPort: 49101,
					checkInterval: "5",
					consoleAddress: '',
					vmId: '',
					rpcThreadNum:1,
					rpcTime:5000
				},
				nodeIPandnodeGateway: '',

				// 表单校验
				rules: {
					nodeName: [{
						required: true,
						message: '请输入节点名称',
						trigger: 'blur'
					}, ],
					nodeGateway: [{
							required: true,
							message: '请输入网关地址',
							trigger: 'blur'
						},
						{
							pattern: global_.IpRegex,
							message: '请输入合法_有效的网关地址',
							trigger: "blur"
						},
					],
					nodeType: [{
						required: true,
						message: '请选择节点类型',
						trigger: 'blur'
					}, ],
					nodeIp: [{
							required: true,
							message: '请输入节点ip地址',
							trigger: 'blur'
						},
						{
							pattern: global_.IpRegex,
							message: global_.IpRegex_msg,
							trigger: "blur"
						},
						{
							validator: ipCheckExist,
							trigger: "blur"
						}
					],
					vmType: [{
						required: true,
						message: '请选择宿主类型',
						trigger: 'blur'
					}, ],
					vmId: [{
						required: false,
						validator: CheckVmId,
						trigger: "blur"
					}, ],
					haPort: [{
						required: true,
						message: '请输入节点端口号',
						trigger: 'blur'
					}, {
						pattern: global_.PortRegex,
						message: global_.PortRegex_msg,
						trigger: "blur"
					}],
					nodeSystem: [{
						required: true,
						message: '请输入操作系统',
						trigger: 'blur'
					}, ],
					consoleAddress: [{
							required: true,
							message: '请输入与节点IP同网段的控制台地址',
							trigger: 'blur'
						},
						{
							pattern: global_.IpRegex,
							message: global_.IpRegex_msg,
							trigger: "blur"
						}
					],
					checkInterval: [{
						required: true,
						message: '请选择心跳间隔',
						trigger: 'blur'
					}, ],
					dataDate: [{
							required: true,
							message: '请输入数据存留时间',
							trigger: 'blur'
						},
						{
							pattern: global_.PositiveIntegerRegex,
							message: global_.PositiveIntegerRegex_msg,
							trigger: "blur"
						}
					],
				},
				delNodeList: [],
				//节点类型
				nodeTypeOptions: [],
				//节点状态
				nodeStatusOptions: [],
				//代理状态
				agentStatusOptions: [],
				//代理应用状态
				agentAppStatusOptions: [],
				//心跳间隔
				checkIntervalOptions: [],
				hostTypeOptions: [],
				sysDialogVisible: false,
				isOne: 1,
				//新手引导配置
				defineSteps: [],
				userDriverInfo: {},
				selection:[],
			};
		},
		created() {
			if (this.$route.params.id) {
				this.queryParams.id = this.$route.params.id;
			}
			if (this.$route.params.nodeStatus) {
				this.queryParams.nodeStatus = this.$route.params.nodeStatus;
			}
			this.getList();
			this.timer();
			this.getDiceData();

			this.isOne++
		},
		activated() {

			// //接收首页的路由传参
			this.queryParams.id = this.$route.params.id;
			this.queryParams.nodeStatus = this.$route.params.nodeStatus;
			this.getList();
			if (this.isOne != 1) {
				this.timer();

			}
			this.isOne++
		},
		deactivated() {
			//离开页面的时候销毁 定时器任务
			clearInterval(this.setIntervalTime);
		},
		destroyed() {
			clearInterval(this.setIntervalTime);
		},
		mounted() {

			this.defineSteps = [{
					element: '#guidance',
					popover: {
						title: '帮助引导',
						description: '显示本页面的基础介绍，按钮功能和相关的常见问题，和配置攻略。也可以在帮助中心查看所有帮助信息。',
					}
				},{
					element: '#queryForm',
					popover: {
						title: '搜索区域',
						description: '输入节点名称,IP或者选择类型状态，来筛选出指定的节点',
					}
				},
				{
					element: '#addBox',
					popover: {
						title: '新增节点',
						description: '点击新增，按要求添加新节点',
					}
				},
				{
					element: '#tableBox',
					popover: {
						title: '节点列表',
						description: '显示已经添加的所有节点列表展示',
					}
				},
			]


			var vue = this;
			setTimeout(() => {
				var belfNode_index = JSON.parse(sessionStorage.getItem('novice_guidance_status')).belfNode_index;
				if (belfNode_index != 'true') {
					vue.driverStart();
				}
			}, 300);

		},
		methods: {
			//定时器
			timer(){
				var vue = this;
				clearInterval(this.setIntervalTime);
				this.setIntervalTime = window.setInterval(()=>{
					vue.getList();
				},5000)
			},
			//开启新手引导
			driverStart() {
				this.$driver.defineSteps(this.defineSteps);
				this.$driver.start();
				this.$store.dispatch("add_guidance_status", 'belfNode_index');
			},
			changeNodeTypeFn(res) {
				if(res == 3){
					this.form.haPort = 49131;
				}else{
					this.form.haPort = 49101;
				}
			},
			//查看
			showHandle(row) {
				this.sysDialogVisible = true;
				this.$refs.sysDialog.showHandle(row);

			},
			/** 查询节点信息列表 */
			getList() {
				this.loading = true;
				var vue = this;


				listBelfNode(this.queryParams).then(response => {
					this.loading = false;
					if(JSON.stringify(this.belfNodeList) == JSON.stringify(response.rows)){
						return false;
					}

					this.belfNodeList = response.rows;
					this.total = response.total;




				});
			},
			//联通测试
			testHttpCode(resolve, ) {
				var vue = this;

				nodeCheck({
				"id": this.form.id,
				}).then(response => {
					vue.fullscreenLoading = false;
					vue.open = false;

					if (response.data.status) {
						vue.$message({
							message: '节点-在线',
							type: 'success'
						});
					} else {
						vue.$message({
							message: '节点-离线',
							type: 'error'
						});
					}
					if (resolve) {
						resolve('获取节点成功');
					}
				}).catch((err) => {
					this.fullscreenLoading = false;
				});
			},
			//获取字典数据
			getDiceData() {
				//  获取操作系统
				this.getDicts('sys_version').then(response => {
					this.nodeSystem = response.data;
				})
				//节点类型
				this.getDicts('node_type').then(response => {
					this.nodeTypeOptions = response.data;
				})

				//节点状态
				this.getDicts('node_status').then(response => {
					this.nodeStatusOptions = response.data;
				})

				//心跳间隔
				this.getDicts('node_check_interval').then(response => {
					this.checkIntervalOptions = response.data;
				})


				//宿主类型
				this.getDicts('host_type').then(response => {
					this.hostTypeOptions = response.data;
				})
				//
				// 			//代理应用状态
				// 			this.getDicts('agent_app_status').then(response => {
				// 				this.agentAppStatusOptions = response.data;
				// 			})
			},
			nodeSystemFormat(row, column) {
				return this.selectDictLabel(this.nodeSystem, row.nodeSystem);
			},
			// 数据状态字典翻译
			nodeTypeFormat(row, column) {
				return this.selectDictLabel(this.nodeTypeOptions, row.nodeType);
			},
			// 数据状态字典翻译
			nodeStatusFormat(row, column) {
				return this.selectDictLabel(this.nodeStatusOptions, row.nodeStatus);
			},
			checkIntervalFormat(row, column) {
				return this.selectDictLabel(this.checkIntervalOptions, row.checkInterval);
			},
			hostTypeFormat(row, column) {
				return this.selectDictLabel(this.hostTypeOptions, row.vmType);
			},
			dataDateFormat(row, column) {
				return row.dataDate + "天";
			},

			// 		// 数据状态字典翻译
			// 		agentStatusFormat(row, column) {
			// 			return this.selectDictLabel(this.agentStatus, row.agentStatus);
			// 		},
			// 		// 数据状态字典翻译
			// 		serviceStatusFormat(row, column) {
			// 			return this.selectDictLabel(this.agentAppStatusOptions, row.serviceStatus);
			// 		},
			// 取消按钮
			cancel() {
				this.open = false;
				this.reset();
			},
			// 表单重置
			reset() {
				this.form = {
					id: null,
					nodeName: null,
					nodeType: null,
					nodeIp: null,
					haPort: 49101,
					nodeStatus: null,
					//agentStatus: 0,
					//serviceStatus: 0,
					nodeDesc: null,
					nodeSystem: null,
					consoleAddress: null,
					checkInterval: "5",
					dataDate: null,
					nodeGateway: null,
					rpcThreadNum:1,
					rpcTime:5000
				};
				this.resetForm("form");
			},
			/** 搜索按钮操作 */
			handleQuery() {
				this.queryParams.pgNum = 1;
				this.queryParams.id = '';
				this.getList();
			},
			/** 重置按钮操作 */
			resetQuery() {
				this.resetForm("queryForm");
				this.queryParams.id = '';
				this.queryParams.nodeStatus = '';
				this.handleQuery();
			},
			// 多选框选中数据
			handleSelectionChange(selection) {
				this.multiple = !selection.length
				this.selection = selection;
			},
			/** 新增按钮操作 */
			handleAdd() {
				this.reset();
				// 控制台默认本机地址

				if (global_.IpRegex.test(window.location.hostname)) {
					var arr = window.location.hostname.split('.');
					// this.form.nodeIp = arr[0] + '.' +arr[1] + '.';
					this.form.consoleAddress = window.location.hostname;
				}



				this.open = true;
				this.title = "添加节点信息";
			},
			// 节点IP地址发生变化时，网关内容也发生变化
			handlerPageNo(e) {
				this.nodeIPandnodeGateway = e.split('.')
				if (this.nodeIPandnodeGateway.length > 2) {
					this.form.nodeGateway = this.nodeIPandnodeGateway[0] + '.' + this.nodeIPandnodeGateway[1] + '.' + '1.1'
				}

			},
			//刷新
			handleUpdateFn(row, resh) {
				this.form = row;
				//获取节点状态
				this.testHttpCode();
				this.getList();
			},
			/** 修改按钮操作 */
			handleUpdate(row) {
				this.reset();
				const id = row.id || this.ids[0];

				const loading = this.$loading({
					lock: true,
					text: '加载中...',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});


				loading.close();

				getBelfNode({
					'id': id
				}).then(response => {
					this.form = response.data;

					this.open = true;
					this.title = "修改节点信息";
					//获取节点状态
					//this.testHttpCode();
				}).catch((err) => {
					loading.close();
				});

			},
			nodeSysChange(val) {
				this.nodeSystem.map((item) => {
					if (item.dictValue == val) {
						this.form.sysType = item.extendVal
					}
				})
			},
			/** 提交按钮 */
			submitForm() {
				var vue = this;
				this.$refs["form"].validate(valid => {
					if (valid) {

						// 确认时间过长 添加loading
						const loading = this.$loading({
							lock: true,
							text: '加载中...',
							spinner: 'el-icon-loading',
							background: 'rgba(0, 0, 0, 0.7)'
						});
						if (!this.form.nodeStatus) {
								this.fullscreenLoading = false
								addBelfNode(this.form).then(response => {
									loading.close();
									this.msgSuccess("新增成功");
									this.open = false;
									this.queryParams.pgNum = 1;
									this.getList();
								}).catch((err) => {
									loading.close();
								});
							return false;
						}
						if (this.form.id != null) {

							new Promise((resolve) => {
								//获取节点状态
								this.testHttpCode(resolve);
							}).then((res) => {
								updateBelfNode(this.form).then(response => {
									loading.close();
									this.msgSuccess("修改成功");
									this.open = false;
									this.getList();
								}).catch((err) => {
									loading.close();
								});
							})

						} else {
							addBelfNode(this.form).then(response => {
								this.msgSuccess("新增成功");
								loading.close();
								this.queryParams.pgNum = 1;
								this.open = false;
								this.getList();
							}).catch((err) => {
								loading.close();
							});;
						}
					}
				});
			},

			handleDelete(row) {
				var vue = this;

				this.delNodeList = [];
				if(row.id){
					this.delNodeList.push(row)
				}else{
					this.delNodeList = this.delNodeList.concat(this.selection);
				}
				this.ids = this.delNodeList.map(item => item.id)

				this.delNodeDialogVisible = true;
				return false;

			},

			/** 删除按钮操作 */
			handleDeleteFn() {
				var vue = this;
				const loading = this.$loading({
					lock: true,
					text: '加载中...',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});

				delBelfNode({
					'ids': this.ids
				}).then(response => {
					loading.close();
					vue.getList();
					vue.msgSuccess("删除成功");
					vue.delNodeDialogVisible = false;
				});


			},

		}
	};
</script>
<style scoped>
	.hsPortSpan {
		display: inline-block;
		line-height: 36px;
		margin-left: 20px;
		color: #3fb0e3;
		cursor: pointer;
	}

	#guidance{
		position: absolute;
		top: 0;
		right: 0;
		height: 58px;
		width: 100px;
	}

	.tagDiv{
		display: inline-block;
		border: 1px solid #00bcd4;
		border-radius: 4px;
		padding: 0px 10px;
		margin-right: 10px;
		background-color: #f6fcff;
		margin-bottom: 10px;
	}

	.tagDiv p{
		padding: 3px 10px;
		margin: 0;
	}
	.ft16{
		font-size: 16px;
	}
	.h170{
		height: 170px;
		overflow: auto;
	}
</style>
